<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Free HTML5 Bootstrap Admin Template</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="Charisma, a fully featured, responsive, HTML5, Bootstrap admin template.">
	<meta name="author" content="Muhammad Usman">

	<!-- The styles -->
	<link id="bs-css" href="css/bootstrap-cerulean.css" rel="stylesheet">
	<style type="text/css">
	  body {
		padding-bottom: 40px;
	  }
	  .sidebar-nav {
		padding: 9px 0;
	  }
	</style>
	<link href="css/bootstrap-responsive.css" rel="stylesheet">
	<link href="css/charisma-app.css" rel="stylesheet">
	<link href="css/jquery-ui-1.8.21.custom.css" rel="stylesheet">
	<link href='css/fullcalendar.css' rel='stylesheet'>
	<link href='css/fullcalendar.print.css' rel='stylesheet'  media='print'>
	<link href='css/chosen.css' rel='stylesheet'>
	<link href='css/uniform.default.css' rel='stylesheet'>
	<link href='css/colorbox.css' rel='stylesheet'>
	<link href='css/jquery.cleditor.css' rel='stylesheet'>
	<link href='css/jquery.noty.css' rel='stylesheet'>
	<link href='css/noty_theme_default.css' rel='stylesheet'>
	<link href='css/elfinder.min.css' rel='stylesheet'>
	<link href='css/elfinder.theme.css' rel='stylesheet'>
	<link href='css/jquery.iphone.toggle.css' rel='stylesheet'>
	<link href='css/opa-icons.css' rel='stylesheet'>
	<link href='css/uploadify.css' rel='stylesheet'>
	
	<link href="css/jcrop/demos.css" rel="stylesheet" type="text/css" /> 
	<!--  
	<link href="css/jcrop/main.css" rel="stylesheet" type="text/css" />
	-->
	<link href="css/jcrop/jquery.Jcrop.css" rel="stylesheet" type="text/css" />
	<!-- The fav icon -->
	<link rel="shortcut icon" href="img/favicon.ico">
<script type="text/javascript">
	Query(function($) {
		var jcrop_api;
		$('#target').Jcrop({
			onChange : showCoords,
			onSelect : showCoords,
			onRelease : clearCoords
		}, function() {
			jcrop_api = this;
		});

		$('#coords').on(
				'change',
				'input',
				function(e) {
					var x1 = $('#x1').val(), x2 = $('#x2').val(), y1 = $('#y1')
							.val(), y2 = $('#y2').val();
					jcrop_api.setSelect([ x1, y1, x2, y2 ]);
				});

		function updatePreview(c) {
			if (parseInt(c.w) > 0) {
				var rx = xsize / c.w;
				var ry = ysize / c.h;

				$pimg.css({
					width : Math.round(rx * boundx) + 'px',
					height : Math.round(ry * boundy) + 'px',
					marginLeft : '-' + Math.round(rx * c.x) + 'px',
					marginTop : '-' + Math.round(ry * c.y) + 'px'
				});
			}
		};

	});

	// Simple event handler, called from onChange and onSelect  event handlers, as per the Jcrop invocation above
	function showCoords(c) {
		$('#x1').val(c.x);
		$('#y1').val(c.y);
		$('#x2').val(c.x2);
		$('#y2').val(c.y2);
		$('#w').val(c.w);
		$('#h').val(c.h);
	};

	function clearCoords() {
		$('#coords input').val('');
	};

	function init() {
		$('.step2').hide();
	}
</script>
</head>

<body onload="init()">

	<!-- Header file -->
	<jsp:include page="100-header.jsp" flush="true"/>
		<div class="container-fluid">
		<div class="row-fluid">				
			<!-- Header file -->
			<jsp:include page="100-menu.jsp" flush="true"/>
			<noscript>
				<div class="alert alert-block span10">
					<h4 class="alert-heading">Warning!</h4>
					<p>You need to have <a href="http://en.wikipedia.org/wiki/JavaScript" target="_blank">JavaScript</a> enabled to use this site.</p>
				</div>
			</noscript>
			
			<div id="content" class="span10">
			<!-- content starts -->
			

			<div>
				<ul class="breadcrumb">
					<li>
						<a href="#">Home</a> <span class="divider">/</span>
					</li>
					<li>
						<a href="#">Forms</a>
					</li>
				</ul>
			</div>
			
			<div class="row-fluid sortable">
				<div class="box span12">
					<div class="box-header well" data-original-title>
						<h2><i class="icon-edit"></i> Form Elements</h2>
						<div class="box-icon">
							<a href="#" class="btn btn-setting btn-round"><i class="icon-cog"></i></a>
							<a href="#" class="btn btn-minimize btn-round"><i class="icon-chevron-up"></i></a>
							<a href="#" class="btn btn-close btn-round"><i class="icon-remove"></i></a>
						</div>
					</div>
					
					
					
					<div class="box-content">
						<form class="form-horizontal" enctype="multipart/form-data" method="post" action="" onsubmit="return checkForm()">
						<fieldset>
									<legend>Datepicker, Cosmetic</legend>
									<table  border="1"> 
										<tr>
											<!-- left -->
											<td width="15%">
												<table>
													<tr>
														<td>
															<div class="control-group">
																<label class="control-label" for="date01">Date input</label>
																<div class="controls"><input type="text" class="input-small datepicker"  id="date01" value="02/16/12"></div>
															</div>
														</td>
													</tr>
														
													<tr>
														<td>
															<div class="control-group">
															  <label class="control-label" for="fileInput">File input</label>
															  <div class="controls"><input class="input-file uniform_on"  name="image_file" id="image_file" type="file"  onchange="fileSelectHandler()"></div>
															  <div class="error"></div>
															</div>  
														</td>
													</tr>
												</table>
											</td>
											
											<!-- center -->
											<td width="40%">
												<div class="step2" >
													<div style="display:table-cell; vertical-align:middle; text-align:center">
														<img  id="preview" />
											   		</div>
												</div>
											</td>
											
											<!-- right -->		
											<td width="30%">
											<table>
											<tr>
											<td>
											
											</td>
											</tr>
											<tr>
											<td>
											<div class="step2" style="margin-left:2px;">
												<div style="margin-top: 10px; margin-left:10px; vertical-align:center; text-align:center">
												    <label style="display: inline; color: red">X1 <input type="text" style="width: 2em;" size="4" id="x1" name="x1" /></label>
												    <label style="display: inline; color: red">Y1 <input type="text" style="width: 2em;" size="4" id="y1" name="y1" /></label>
												    <label style="display: inline; color: red">X2 <input type="text" style="width: 2em;" size="4" id="x2" name="x2" /></label>
												    <label style="display: inline; color: red">Y2 <input type="text" style="width: 2em;" size="4" id="y2" name="y2" /></label>
												    <label style="display: inline; color: red">W <input type="text"  style="width: 2em;" size="4" id="w" name="w" /></label>
												    <label style="display: inline; color: red">H <input type="text"  style="width: 2em;" size="4" id="h" name="h" /></label>
											    </div>
											</div>
											</td>
											</tr>
											
											</table>
											
											</td>
										</tr>
									</table>
							  <div class="form-actions">
							  <button type="submit" class="btn btn-primary">Save changes</button>
							  <button type="reset" class="btn">Cancel</button>
							</div>
						  </fieldset> 
						</form>   

					</div>
				
				
				
				
				</div><!--/span-->

			</div><!--/row-->
					<!-- content ends -->
			</div><!--/#content.span10-->
				</div><!--/fluid-row-->
				
		<hr>

		<div class="modal hide fade" id="myModal">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">×</button>
				<h3>Settings</h3>
			</div>
			<div class="modal-body">
				<p>Here settings can be configured...</p>
			</div>
			<div class="modal-footer">
				<a href="#" class="btn" data-dismiss="modal">Close</a>
				<a href="#" class="btn btn-primary">Save changes</a>
			</div>
		</div>

	<!-- Header file -->
	<jsp:include page="100-footer.jsp" flush="true"/>
		
	</div><!--/.fluid-container-->

	<!-- Header file -->
	<jsp:include page="100-js.jsp" flush="true"/>
		
</body>
</html>
